<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WEBINSKY</title>

    <link href="theme/todc-bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="theme/todc-bootstrap/css/todc-bootstrap.min.css" rel="stylesheet">
    <link href="theme/todc-bootstrap/css/docs.css" rel="stylesheet">
    <link href="theme/todc-bootstrap/css/custom-template.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="theme/iconfont/iconfont.css">
    <link href="theme/css/mp-style.css" rel="stylesheet">
    <link href="theme/css/mp-style-panel.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="theme/todc-bootstrap/js/html5shiv.min.js"></script>
    <script src="theme/todc-bootstrap/js/respond.min.js"></script>
    <![endif]-->

    <link href="theme/css/spinners/spinkit.css" rel="stylesheet">
    <style>
        body {
            padding-top: 80px;
            padding-bottom: 80px;
            background-color: #fff;
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }
        .form-signin-heading {
            margin: 0 0 15px;
            font-size: 32px;
            font-weight: 400;
            color: #555;
        }
        .form-signin .checkbox {
            margin-bottom: 10px;
            font-weight: normal;
        }
        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
        }
        .form-signin .form-control:focus {
            z-index: 2;
        }
        .form-signin input[type="email"] {
            margin-bottom: 10px;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
        }
        .card {
            width: 304px;
            padding: 20px 25px 30px;
            margin: 0 auto 25px;
            background-color: #f7f7f7;
            border-radius: 2px;
            -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
        }
        .card-signin {
            width: 354px;
            padding: 40px;
        }
        .card-signin .profile-img {
            display: block;
            width: 96px;
            height: 96px;
            margin: 0 auto 10px;
        }

        .loadend{

        }
    </style>

</head>
<body>

<div class="container">

    <h2 class="form-signin-heading text-center">WEBINSKY</h2>

    <div class="card card-signin">
        <img class="img-circle profile-img" src="theme/images/avatar.png" alt="">
        <form class="form-signin" onsubmit="return false;">
            <label class="sr-only">账号</label>
            <input type="text" class="form-control loadend" name="username" placeholder="账号" required autofocus disabled>
            <label class="sr-only">密码</label>
            <input type="password" class="form-control loadend" name="password" placeholder="密码" required disabled>
            <div class="input-code" style="display: none;">
                <label class="sr-only">验证码</label>
                <input type="text" class="form-control loadend" name="code" placeholder="验证码">
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">登 录</button>

            <div class="checkbox">
                <!--<a class="pull-right">需要帮助?</a>-->
                <label>
                    <input type="checkbox" name="remember" value="1"> 记住账号
                </label>
            </div>

        </form>
    </div>

</div>

<!-- panel.confirm -->
<div class="mp-hide-html">
    <div class="mp-panel mp-panel-dialog-message-confirm">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6">
                    <ol class="breadcrumb mp-panel-title">
                        <li><a href="#">消息</a></li>
                    </ol>
                </div>
            </div>
            <div class="mp-divider"></div>
            <div class="row">
                <div class="col-xs-12 mp-message-content">

                </div>
            </div>
            <div class="mp-divider"></div>
            <div class="row mp-panel-footer">
                <div class="col-xs-12 mp-pull-right">
                    <button class="btn btn-success mp-submit">确定</button>
                    <button class="btn btn-default mp-cancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="sk-mask" style="display: block;">
    <div class="sk-fading-circle">
        <div class="sk-circle1 sk-circle"></div>
        <div class="sk-circle2 sk-circle"></div>
        <div class="sk-circle3 sk-circle"></div>
        <div class="sk-circle4 sk-circle"></div>
        <div class="sk-circle5 sk-circle"></div>
        <div class="sk-circle6 sk-circle"></div>
        <div class="sk-circle7 sk-circle"></div>
        <div class="sk-circle8 sk-circle"></div>
        <div class="sk-circle9 sk-circle"></div>
        <div class="sk-circle10 sk-circle"></div>
        <div class="sk-circle11 sk-circle"></div>
        <div class="sk-circle12 sk-circle"></div>
    </div>
</div>

</body>
<script src="theme/todc-bootstrap/js/jquery-1.12.4.min.js"></script>
<script src="theme/todc-bootstrap/js/bootstrap.min.js"></script>
<script src="theme/todc-bootstrap/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="librarys/jquery.json.js"></script>
<script src="librarys/moment.js"></script>
<script src="librarys/common.js"></script>
<script src="librarys/common-ui.js"></script>
<script src="librarys/apis.js"></script>
<script src="librarys/app.js"></script>
<script>
    $(function() {
        setTimeout(function() {
            $('.sk-mask').fadeOut('fast', function() {
                $('.loadend').removeAttr('disabled');
            });
        }, 1000);
        $('[type="submit"]').click(function(e) {
            $('.sk-mask').fadeIn('fast');
            var form = document.forms[0];
            var username = $('[name="username"]').val();
            var password = $('[name="password"]').val();

            if (!username && !password) {
                MPDialog.alert({
                    message: '请正确输入用户名和密码！',
                });
                return;
            }

            var code     = $('[name="code"]').val();
            var remember = $('[name="remember"]').is(':checked');

            if ($('.input-code').is(':visible')) {
                if (!code) {
                    return;
                }
                Apis.loginCode(code, function(response) {
                    if (response.status == 200) {
                        location.href = 'dashboard.html';
                    } else {
                        MPDialog.alert({
                            message: response.message,
                        });
                        $('.sk-mask').fadeOut('fast');
                    }
                });
                return;
            }

            if (remember) {
                WStorage.setItem("remember", username);
            } else {
                WStorage.removeItem("remember");
            }
            var par = {
                name: username,
                password: password,
                validateCode: null
            };
            App.dologin(par, function(result, userInfo) {
                if (result) {
                    if (userInfo.role == 1) {
                        setTimeout(function() {
                            $('.input-code').show();
                            $('.sk-mask').fadeOut('fast');
                        }, 300);
                        return;
                    }
                    setTimeout(function() {
                        if (userInfo.role == 3) {
                            location.href = '/support/manual/index.html?inside=true';
                            $('.sk-mask').fadeOut('fast');
                            return;
                        }
                        location.href = 'dashboard.html';
                        $('.sk-mask').fadeOut('fast');
                    }, 300);
                } else {
                    setTimeout(function() {
                        $('.sk-mask').fadeOut('fast');
                    }, 300);
                    MPDialog.alert({
                        message: userInfo,
                    });
                }
            });
        });
        var remember = WStorage.getItem("remember");
        if (remember) {
            $('[name="username"]').val(remember);
            $('[name="remember"]')[0].checked = true;
        }
    });
</script>
</html>